<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue 拖拽-svg背景</title>
    <style type="text/css">
    .button-box {
        padding: 10px;
    }
    
    .button-box button {
        background: #2196F3;
        color: #fff;
        padding: 5px 10px;
        border: 0;
        border-radius: 4px;
    }
    
    .canvas {
        position: relative;
    }
    
    .layout {
        border: 1px solid #d7d8da;
        border-radius: 4px;
        margin-top: 4px;
        position: absolute;
        touch-action: none;
        background: #f2f2f2;
        cursor: move;
    }
    .operator-box a{
    	float: right;
	    width: 15px;
	    height: 15px;
	    background: #9E9E9E;
	    text-align: center;
	    line-height: 10px;
	    border-radius: 20px;
	    margin-right: -4px;
	    margin-top: -4px;
	    color: #fff;
	    text-decoration: none;
	    font-size: 12px;
	    cursor: pointer;
    }
    .operator-box a:hover{
    	background: #FF5722;
    }
    .resizable-handle {
        content: '';
        position: absolute;
        width: 40px;
        height: 40px;
        bottom: 0;
        right: 0;
        cursor: nwse-resize;
    }
    
    .resizable-handle:after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        bottom: 10px;
        right: 10px;
        border-bottom: 2px solid #c6c6c6;
        border-right: 2px solid #c6c6c6;
        border-bottom-right-radius: 2px;
        transition: opacity .2s;
        opacity: 1;
    }
    </style>
</head>

<body>
    <div id="canvas">
        <div class="button-box">
            <button @click.stop="addLayout()">
                	添加布局
            </button>
        </div>
        <div class="canvas" @dblclick="specifyPosition($event)">
            <div class="layout " 
            	v-for="(layout,index) in  layoutList" 
            	:key="index" :style="layoutSizePosition(layout)" 
            	@mousedown.stop="drag($event,true,layout)">
            	<div class="operator-box">
            		<a href="javascript:" @click.stop="delLayout(layout)" title="刪除布局">x</a>
            	</div>
                <div class="layout-content">
                </div>
                <span @mousedown.stop="drag($event,false,layout)" class="resizable-handle"></span>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</html>
